<template>
  <el-drawer v-model="dialogFormVisible" :title="dialogTitle" size="1000" @close="handleClose">
    <el-form
      :model="formData"
      ref="formRef"
      :rules="rules"
      label-position="right"
      label-width="80px"
      size="default"
      :scroll-to-error="true"
      :show-message="false"
    >
      <el-form-item
        label="产品名称"
        prop="product_name"
        class="required label-right-align"
        label-width="120px"
      >
        <el-input
          v-model="formData.product_name"
          type="text"
          clearable
          :style="{ width: '300px' }"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="产品类型"
        prop="product_type"
        class="required label-right-align"
        label-width="120px"
      >
        <el-select v-model="formData.product_type" :style="{ width: '300px' }">
          <el-option label="窗膜" value="窗膜"></el-option>
          <el-option label="车衣" value="车衣"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="简短描述"
        prop="short_description"
        class="label-right-align"
        label-width="120px"
      >
        <el-input
          v-model="formData.short_description"
          type="text"
          :style="{ width: '300px' }"
        ></el-input>
      </el-form-item>
      <el-form-item label="详细描述" prop="period" class="label-right-align" label-width="120px">
        <Uediter v-model="formData.full_description" @change="contentChangeFunc"></Uediter>
      </el-form-item>
      <el-form-item
        label="主要特点"
        prop="main_features"
        class="label-right-align"
        label-width="120px"
      >
        <div class="tag-box">
          <el-tag
            v-for="tag in formData.main_features"
            :key="tag"
            closable
            :disable-transitions="false"
            @close="delFeature(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            v-if="featureVisible"
            ref="FeatureRef"
            v-model="tagVal"
            style="width: 100px"
            size="small"
            @keyup.enter="confirmFeature"
            @blur="confirmFeature"
          />
          <el-button v-else class="button-new-tag" size="small" @click="showFeature">
            + 添加特点
          </el-button>
        </div>
      </el-form-item>
      <el-form-item
        label="技术规格"
        prop="tech_specs"
        class="label-right-align"
        label-width="120px"
      >
        <div class="tag-box">
          <el-tag
            v-for="tag in formData.tech_specs"
            :key="tag"
            closable
            :disable-transitions="false"
            @close="delTech(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            v-if="techVisible"
            ref="TechRef"
            v-model="tagVal"
            style="width: 100px"
            size="small"
            @keyup.enter="confirmTech"
            @blur="confirmTech"
          />
          <el-button v-else class="button-new-tag" size="small" @click="showTech">
            + 添加规格
          </el-button>
        </div>
      </el-form-item>
      <el-form-item label="材质" prop="material" class="label-right-align" label-width="120px">
        <el-input v-model="formData.material" type="text"></el-input>
      </el-form-item>
      <el-form-item label="厚度" prop="thickness" class="label-right-align" label-width="120px">
        <el-input-number v-model="formData.thickness" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item
        label="质保平均年限"
        prop="warranty_years"
        class="label-right-align"
        label-width="120px"
      >
        <el-input-number v-model="formData.warranty_years" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item label="价格" prop="price_range" class="label-right-align" label-width="120px">
        <el-input-number v-model="formData.price_range" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item
        label="浏览次数"
        prop="view_count"
        class="label-right-align"
        label-width="120px"
      >
        <el-input-number v-model="formData.view_count" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item
        label="是否推荐"
        prop="is_featured"
        class="label-right-align"
        label-width="120px"
      >
        <el-switch v-model="formData.is_featured" :active-value="1" :inactive-value="0"></el-switch>
        <el-text color="#909399" size="small">设置为推荐的产品将在前台页面显示推荐标记</el-text>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogClose">取消</el-button>
        <el-button type="primary" @click="submitForm"> 提交 </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, defineExpose, defineEmits, onMounted, nextTick } from "vue";
import { ElMessage } from "element-plus";
import Uediter from "@/components/UE.vue";
import { addApi, editApi, getInfoApi } from "@/api/carfilm/product_info";
const dialogFormVisible = ref(false);
const formRef = ref<any>(null);
const dialogTitle = ref("");
/*富文本框配置*/
const ueditor = ref({
  text: "",
  config: {
    initialFrameWidth: 800,
    initialFrameHeight: 400,
  },
});
defineProps({
  category: {
    type: Array,
    default: [] as any[],
  },
});
const formData = ref({
  id: 0,
  product_name: "",
  product_type: "",
  short_description: "",
  full_description: "",
  main_features: [] as string[],
  tech_specs: [] as string[],
  material: "",
  thickness: 0, //厚度
  warranty_years: 0,
  price_range: 0,
  view_count: 0,
  is_featured: 0,
  main_image: "",
  gallery_images: [] as string[],
});

const rules = reactive({
  product_name: [
    {
      required: true,
      message: "请输入产品名称",
    },
  ],
  product_type: [
    {
      required: true,
      message: "请选择产品类型",
    },
  ],
});
const featureVisible = ref(false);
const techVisible = ref(false);
const tagVal = ref("");
const FeatureRef = ref<any>(null);
const TechRef = ref<any>(null);
const delFeature = (tag: string) => {
  formData.value.main_features = formData.value.main_features.filter((e: string) => e !== tag);
};
const confirmFeature = () => {
  if (tagVal.value) {
    formData.value.main_features.push(tagVal.value);
  }
  tagVal.value = "";
  featureVisible.value = false;
};
const showFeature = () => {
  featureVisible.value = true;
  nextTick(() => {
    FeatureRef.value!.input!.focus();
  });
};
const delTech = (tag: string) => {
  formData.value.tech_specs = formData.value.tech_specs.filter((e: string) => e !== tag);
};
const confirmTech = () => {
  if (tagVal.value) {
    formData.value.tech_specs.push(tagVal.value);
  }
  tagVal.value = "";
  techVisible.value = false;
};
const showTech = () => {
  techVisible.value = true;
  nextTick(() => {
    TechRef.value!.input!.focus();
  });
};
const emits = defineEmits(["getTable"]);
const contentChangeFunc = (e: any) => {
  formData.value.full_description = e;
};
function addSave() {
  addApi(formData.value)
    .then((res) => {
      ElMessage.success("添加成功");
      emits("getTable");
      dialogClose();
    })
    .catch((err) => {});
}
function editSave() {
  editApi(formData.value)
    .then((res) => {
      ElMessage.success("编辑成功");
      emits("getTable");
      dialogClose();
    })
    .catch((err) => {});
}
function getInfo(id: number) {
  getInfoApi(id)
    .then((res: any) => {
      if (res.code == 1) {
        formData.value = {
          ...res.data,
          ...{
            thickness: parseFloat(res.data.thickness),
            price_range: parseFloat(res.data.price_range.replace("￥", "")),
          },
        };
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {});
}

function submitForm() {
  formRef.value.validate().then(() => {
    if (formData.value.id == 0) {
      addSave();
    } else {
      editSave();
    }
  });
}

const dialogClose = () => {
  dialogFormVisible.value = false;
};

const dialogOpen = (id: number) => {
  dialogFormVisible.value = true;
  if (id > 0) {
    dialogTitle.value = "编辑产品";
    getInfo(id);
  } else {
    dialogTitle.value = "添加产品";
  }
};

const handleClose = () => {
  formRef.value.resetFields();
  formData.value = {
    id: 0,
    product_name: "",
    product_type: "",
    short_description: "",
    full_description: "",
    main_features: [] as string[],
    tech_specs: [] as string[],
    material: "",
    thickness: 0, //厚度
    warranty_years: 0,
    price_range: 0,
    view_count: 0,
    is_featured: 0,
    main_image: "",
    gallery_images: [] as string[],
  };
  dialogFormVisible.value = false;
};

defineExpose({
  dialogOpen,
});
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
</style>

<style lang="scss" scoped>
.tag-box {
  display: flex;
  align-items: center;

  .el-tag {
    margin-right: 5px;
  }
}
</style>
